<!-- 配置打印机 -->
<template>
  <div class="page-box h100 display-flex czbj">
    <div class="from-box-ks">
      <n-form
        :label-width="200"
        label-placement="left"
        class="mt20"
        ref="formRef"
      >
        <n-form-item label="纸张大小：">
          <div class="display-flex">
            <div class="flex-1 mr10">
              <n-input placeholder="纸张的宽度" v-model:value="forms.zzW" />
            </div>
            <span class="mt5">({{ forms.zzW / 10 }}mm)</span>
            <div class="flex-1 ml10">
              <n-input placeholder="纸张的高度" v-model:value="forms.zzH" />
            </div>
            <span class="mt5 ml10">({{ forms.zzH / 10 }}mm)</span>
          </div>
        </n-form-item>
        <n-form-item label="需要显示的标签：">
          <n-checkbox-group class="mt10" v-model:value="printSetup">
            <n-space item-style="display: flex;">
              <n-checkbox
                :value="item.value"
                :label="item.name"
                v-for="(item, idx) in lableArray"
                :key="idx"
              />
            </n-space>
          </n-checkbox-group>
        </n-form-item>
        <n-form-item label="字体设置：" v-if="isshowFont">
          <div class="display-flex">
            <div class="flex-1 mr10">
              <n-input
                placeholder="字体大小"
                v-model:value="fontSet.size"
                @input="zitichange"
              />
            </div>
            <span class="mt5">(px)</span>
            <div class="flex-1 ml10">
              <n-color-picker
                v-model:value="fontSet.color"
                @complete="getcolor"
              />
            </div>
          </div>
        </n-form-item>

        <n-form-item label="&nbsp;">
          <n-button type="primary" size="medium" @click="saveFun"
            >保存</n-button
          >
          <n-button type="primary" size="medium" @click="llbtn" class="ml20"
            >浏览</n-button
          >
        </n-form-item>
      </n-form>
      <div
        class="paper-box"
        :style="{ width: forms.zzW + 'px', height: forms.zzH + 'px' }"
      >
        <DraggableContainer>
          <template
            class="w100 h100"
            v-for="(item, idx) in printSetup"
            :key="idx"
          >
            <Vue3DraggableResizable
              class="sz"
              v-if="item == 'qcCode'"
              :initW="getobj(item).w"
              :initH="getobj(item).h"
              v-model:x="getobj(item).x"
              v-model:y="getobj(item).y"
              v-model:w="getobj(item).w"
              v-model:h="getobj(item).h"
              @activated="activatedHandle(item)"
            >
              <img
                src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/dxgjAdmin/ksQRcode/i33NSkpmhxYYemrR1658226093440.jpg"
                class="QRcodeimg fz32 vertical-center"
              />
            </Vue3DraggableResizable>

            <Vue3DraggableResizable
              class="sz"
              v-else
              :initW="getobj(item).w"
              :initH="getobj(item).h"
              v-model:x="getobj(item).x"
              v-model:y="getobj(item).y"
              v-model:w="getobj(item).w"
              v-model:h="getobj(item).h"
              @activated="activatedHandle(item)"
            >
              <span
                :style="{
                  'font-size': getobj(item).size + 'px',
                  color: getobj(item).color,
                }"
              >
                {{ getobj(item).name }}: x x x x x x</span
              >
            </Vue3DraggableResizable>
          </template>
        </DraggableContainer>
      </div>
    </div>
  </div>
</template>
 <script lang='ts' setup>
import { ref } from "vue";
import { NColorPicker } from "naive-ui";
import Vue3DraggableResizable from "vue3-draggable-resizable";
import { DraggableContainer } from "vue3-draggable-resizable";
import "vue3-draggable-resizable/dist/Vue3DraggableResizable.css";
const forms = ref({
  zzW: 400,
  zzH: 400,
});
const fontSet = ref({
  size: 16,
  color: "rgba(0, 0, 0, 1)",
});
const isshowFont = ref(false);
const dqxz = ref();
const printSetup = ref(["qcCode"]);
const lableArray = ref([
  {
    name: "二维码",
    value: "qcCode",
    x: 0,
    y: 0,
    w: 200,
    h: 200,
  },
  {
    name: "产品编码",
    value: "productCode",
    x: 0,
    y: 0,
    w: 140,
    h: 10,
    size: 16,
    color: "rgba(0, 0, 0, 1)",
  },
  {
    name: "型号",
    value: "model",
    x: 0,
    y: 0,
    w: 140,
    h: 10,
    size: 16,
    color: "rgba(0, 0, 0, 1)",
  },
  {
    name: "内阻",
    value: "internalResistance",
    x: 0,
    y: 0,
    w: 140,
    h: 10,
    size: 16,
    color: "rgba(0, 0, 0, 1)",
  },
  {
    name: "电压",
    value: "voltage",
    x: 0,
    y: 0,
    w: 140,
    h: 10,
    size: 16,
    color: "rgba(0, 0, 0, 1)",
  },
  {
    name: "容量",
    value: "capacity",
    x: 0,
    y: 0,
    w: 140,
    h: 10,
    size: 16,
    color: "rgba(0, 0, 0, 1)",
  },
  {
    name: "功耗",
    value: "powerDissipation",
    x: 0,
    y: 0,
    w: 140,
    h: 10,
    size: 16,
    color: "rgba(0, 0, 0, 1)",
  },
  {
    name: "生产日期",
    value: "dateManufacture",
    x: 0,
    y: 0,
    w: 140,
    h: 10,
    size: 16,
    color: "rgba(0, 0, 0, 1)",
  },
]);
const getobj = (text) => {
  return lableArray.value.filter((a) => a.value == text)[0];
};
// 浏览触发
const llbtn = () => {
  //   console.log(lableArray);  

  window.LODOP.SET_PRINT_PAGESIZE(0, forms.value.zzW, forms.value.zzH, "");

  lableArray.value.map((a) => {
    printSetup.value.map((b) => {
      if (a.value == b) {
        if (b == "qcCode") {
          window.LODOP.ADD_PRINT_IMAGE(
            a.y,
            a.x,
            a.h,
            a.w,
            "<img border='0' src='https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/dxgjAdmin/ksQRcode/i33NSkpmhxYYemrR1658226093440.jpg' />"
          );
          window.LODOP.SET_PRINT_STYLEA(0, "Stretch", 2);
        } else {
          window.LODOP.ADD_PRINT_TEXT(
            a.y,
            a.x,
            a.w,
            a.h,
            a.name + ": x x x x x x"
          );
          window.LODOP.SET_PRINT_STYLEA(0, "FontSize", a.size);
        }
      }
    });
  });

  window.LODOP.PREVIEW();
};
const activatedHandle = (e) => {
  dqxz.value = lableArray.value.filter((a) => a.value == e)[0];
  fontSet.value.size = dqxz.value.size;
  fontSet.value.color = dqxz.value.color;
  isshowFont.value = false;
  if (fontSet.value.size) {
    isshowFont.value = true;
  }
};
const zitichange = (e) => {
  dqxz.value.size = e;
};
const getcolor = (e) => {
  dqxz.value.color = e;
};
// 保存按钮触发
const saveFun = () => {
  localStorage.forms = JSON.stringify(forms.value);
  localStorage.printSetup = JSON.stringify(printSetup.value);
  localStorage.lableArray = JSON.stringify(lableArray.value);
};

// 页面打开获取缓存数据填充到页面上
if (localStorage.forms) {
  forms.value = JSON.parse(localStorage.forms);
  printSetup.value = JSON.parse(localStorage.printSetup);
  lableArray.value = JSON.parse(localStorage.lableArray);
}
</script>
 <style scoped>
.from-box-ks {
  max-width: 640px;
}
.paper-box {
  border: 1px solid #e0e0e0;
  margin: auto;
  position: relative;
  overflow: hidden;
}
.QRcodeimg {
  background: #999;
  width: 100%;
  height: 100%;
}
</style>